<template>
	<view style="background-color: #F6F6F6;" :style="'height:'+viewHeight+'px;'">
		<view class="form">
			<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
			<u--form labelPosition="left" :model="model1" :rules="rules" ref="uForm">
				<u-form-item labelWidth="80" label="收货人" prop="userInfo.name" borderBottom ref="item1">
					<u--input placeholder="请填写收货人姓名" v-model="model1.userInfo.name" border="none"></u--input>
				</u-form-item>
				<u-form-item labelWidth="80" label="手机号" prop="userInfo.phone" borderBottom ref="item1">
					<u--input placeholder="请填写手机号" v-model="model1.userInfo.phone" border="none"></u--input>
				</u-form-item>
				<u-form-item labelWidth="80" label="省市区" prop="userInfo.city" borderBottom @click="show = true"
					ref="item1">
					<u--input v-model="model1.userInfo.city" disabledColor="#ffffff" placeholder="请选择区域" border="none"
						@focus="show = true"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item labelWidth="80" label="详细地址" prop="userInfo.detail" ref="item1">
					<u--textarea placeholder="请填写详细地址" v-model="model1.userInfo.detail" count></u--textarea>
				</u-form-item>
			</u--form>
			<u-picker :show="show" title="请选择区域" :closeOnClickOverlay="true" ref="uPicker" :columns="columns"
				@cancel="show=false" @close="show=false" @confirm="confirm" @change="changeHandler"></u-picker>
		</view>
		<view class="moren">
			<text>设为默认</text>
			<u-switch v-model="moren" activeColor="#FF6000" @change="change"></u-switch>
		</view>
		<view class="foot_box">
			<u-button :text="edit?'保存':'添加'" type="warning" shape="circle" @click="goAddAdr"></u-button>
			<view style="margin-top: 20rpx;">
				<u-button v-if="edit" plain type="error" text="删除" shape="circle" @click="delAddr"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import city from '@/static/city.json'
	import {
		nextTick
	} from "vue";
	export default {
		data() {
			return {
				edit: false,
				//可视高度
				viewHeight: 0,
				//是否为默认
				moren: false,
				show: false,
				//展示的城市
				columns: [
					['中国', '美国'],
					['深圳', '厦门', '上海', '拉萨'],
					['得州', '华盛顿', '纽约', '阿拉斯加']
				],
				//切换后的下级
				columnData: [
					[{
							id: 21,
							name: '城市2-1',
							children: [{
									id: 211,
									name: '区县2-1-1'
								},
								{
									id: 212,
									name: '区县2-1-2'
								}
							]
						},
						{
							id: 22,
							name: '城市2-2',
							children: [{
									id: 221,
									name: '区县2-2-1'
								},
								{
									id: 222,
									name: '区县2-2-2'
								}
							]
						}
					],
					[{
							id: 21,
							name: '城市2-1',
							children: [{
									id: 211,
									name: '区县2-1-1'
								},
								{
									id: 212,
									name: '区县2-1-2'
								}
							]
						},
						{
							id: 22,
							name: '城市2-2',
							children: [{
									id: 221,
									name: '区县2-2-1'
								},
								{
									id: 222,
									name: '区县2-2-2'
								}
							]
						}
					],
					[{
							id: 21,
							name: '城市2-1',
							children: [{
									id: 211,
									name: '区县2-1-1'
								},
								{
									id: 212,
									name: '区县2-1-2'
								}
							]
						},
						{
							id: 22,
							name: '城市2-2',
							children: [{
									id: 221,
									name: '区县2-2-1'
								},
								{
									id: 222,
									name: '区县2-2-2'
								}
							]
						}
					]
				],
				model1: {
					userInfo: {
						name: '',
						phone: "",
						city: '',
						detail: ""
					},
				},
				rules: {
					'userInfo.name': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
				},
				radio: '',
				switchVal: false
			};
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
			//获取屏幕高度
			uni.getSystemInfo({
				success: (res) => {
					this.viewHeight = res.windowHeight
				}
			})
		},
		onLoad(e) {
			this.edit = e.isEdit == "true" ? this.edit = true : this.edit = false;
			let title = this.edit ? '编辑地址' : '新增地址'
			uni.setNavigationBarTitle({
				title: title
			})
		},
		methods: {
			sexSelect(e) {
				this.model1.userInfo.sex = e.name
				this.$refs.uForm.validateField('userInfo.sex')
			},
			//默认地址切换
			change(e) {
				console.log('change', e);
			},
			//滑动一级二级数据改变
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					indexs,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker,
				} = e;
				console.log(e)
				//index  第一列的索引值
				//indexs  第二列的索引   打印indexs为[0,1,0]第一个为第一列索引  第二个为第二个索引
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(1, this.columns[0][indexs[0]].children);
					picker.setColumnValues(2, this.columnData[indexs[0]][indexs[1]].children);
				} else if (columnIndex === 1) {
					picker.setColumnValues(2, this.columnData[indexs[0]][indexs[1]].children);
				}

			},
			//确定市区
			confirm(e) {
				console.log(e)
				this.model1.userInfo.city = e.value.join(" ")
				this.show = false
			},
			//添加地址
			goAddAdr() {
				console.log("给我保存")
				this.$refs.uForm.validateField('userInfo.sex')
				console.log(this.model1.userInfo)
			},
			//删除地址
			delAddr() {
				console.log("我要删除了")
			}
		},

	}
</script>

<style lang="scss" scoped>
	.form {
		padding: 30rpx;
		background-color: #fff;
	}

	.moren {
		display: flex;
		justify-content: space-between;
		margin-top: 40rpx;
		padding: 40rpx;
		background-color: #fff;
	}

	.foot_box {
		position: fixed;
		bottom: -1px;
		left: 0;
		right: 0;
		background-color: #fff;
		padding: 20rpx 70rpx 80rpx;
	}
</style>